<template>
  <div>
    <div class="con">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品主图</span>
        </div>
        <div>
          <el-image
            style="width: 100px; height: 100px; margin-right: 5px"
            :src="goodsInfo.previewImg"
            :preview-src-list="[goodsInfo.previewImg]"
            fit="fit"
          ></el-image>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div>
          <el-descriptions title="">
            <el-descriptions-item :span="2" label="商品名称">{{
              goodsInfo.productName
            }}</el-descriptions-item>

            <el-descriptions-item :span="2" label="商品售价">{{
              goodsInfo.shopPrice
            }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="市场价格">
              {{ goodsInfo.marketPrice }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="成本价格">{{
              goodsInfo.costPrice
            }}</el-descriptions-item>

            <el-descriptions-item :span="2" label="分类">{{
              goodsInfo.oneCategory +
              "/" +
              goodsInfo.twoCategory +
              "/" +
              goodsInfo.threeCategory
            }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="商品供应商">
              <el-tag type="" effect="dark">
                {{ goodsInfo.goodsSupplier }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="是否上架">
              <el-tag type="success" v-if="goodsInfo.isShelf == 1">是</el-tag>
              <el-tag type="danger" v-if="goodsInfo.isShelf == 0">是否</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="商品分组">{{
              goodsInfo.goodsGroup
            }}</el-descriptions-item>
            <el-descriptions-item :span="2" label="商品类型">
              <span v-if="goodsInfo.isJdGoods == 1">普通商品</span>
              <span v-if="goodsInfo.isJdGoods == 2">京东商品</span>
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="商品码">
              <el-image :src="goodsInfo.productShowQrCode"></el-image>
            </el-descriptions-item>

            <el-descriptions-item :span="3" label="商品详情">
              <div v-html="goodsInfo.details"></div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getGoodsDetail } from "@/api/product/localGoods.js";
export default {
  data() {
    return {
      goodsInfo: {},
    };
  },
  created() {
    this.getGoodsDetail();
  },
  methods: {
    /**获取商品详情 */
    getGoodsDetail() {
      const mallProductId = this.$route.query.id;
      getGoodsDetail(mallProductId).then((res) => {
        this.goodsInfo = res.data;
      });
    },
  },
};
</script>
<style scoped>
.con {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
</style>
